<!--
 * @Description: 个人中心
 * @Author: JiangMing
 * @Date: 2021-09-15 16:09:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-15 16:09:00
-->
<template>
  <view class="page">
    <view class="header">
      <view class="header-info">
        <view class="avator" @click="chooseImage">
          <image class="avator-img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F45%2Fcb%2Fc2%2F45cbc281b651c2dcd45191f3bbb3a8b6.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634288241&t=563b733e7c61fa62e1a0769e94f719f2" />
          <image src="@/static/images/camera.png" class="camera" />
        </view>
        <view class="username">{{ info.userName }}</view>
      </view>
    </view>
    <view class="user-info">
      <view v-for="(item,index) in list" :key="index" class="form-item">
        <view class="form-item__label">
          <text>{{ item.label }}</text>
        </view>
        <view class="form-item__content">
          <text>{{ info[item.key] }}</text>
        </view>
      </view>
    </view>
    <view class="user-info">
      <view class="form-item" @click="passwordChange">
        <view class="form-item__label">
          <image src="@/static/images/lock.png" class="form-item__icon" />
          <text>修改密码</text>
        </view>
        <view class="form-item__content">
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
    </view>
    <view class="handle">
      <button class="btn-primary" @click="loginout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {
        enterprise: "深圳市南山区应急管理局",
        orgName: "部门",
        no: "AC123",
        userName: "张三",
        jobName: "值班员",
        phone: "139999999999",
      },
      list: [
        { label: '企业单位', key: 'enterprise' },
        { label: '所属部门', key: 'orgName' },
        { label: '人员编号', key: 'no' },
        { label: '人员姓名', key: 'userName' },
        { label: '人员职务', key: 'jobName' },
        { label: '联系方式', key: 'phone' },
      ]
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: function (res) {
          console.log(res.tempFilePaths);
        }
      });
    },
    passwordChange() {
      uni.navigateTo({
        url: '/pages/my/password'
      })
    },
    loginout(data) {
      uni.reLaunch({
        url: '/pages/login/index'
      })
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #F8F8F8;
}
.page {
  position: relative;
  .header {
    height: 420rpx;
    background: url('@/static/images/my-bg.png') center bottom no-repeat;
    background-size: 750rpx 420rpx;
    text-align: center;
    position: relative;
    .header-info {
      position: absolute;
      width: 100%;
      bottom: 0;
    }
    .avator {
      display: inline-block;
      width: 176rpx;
      height: 176rpx;
      background-color: rgba(255, 255, 255, .15);
      border-radius: 50%;
      padding: 10rpx;
      margin: 40rpx auto 0;
      box-sizing: border-box;
      position: relative;
      .avator-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
      .camera {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 62rpx;
        height: 62rpx;
      }
    }
    .username {
      font-size: 30rpx;
      margin-top: 20rpx;
    }
  }
  .user-info {
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 5rpx 15rpx rgba(2, 122, 255, 0.1);
    margin: 30rpx 32rpx 0;
    padding: 0 32rpx;
    .form-item {
      padding: 32rpx 0;
      border-bottom: 1px solid #eee;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      color: #2b2b2b;
      .form-item__label {
        display: flex;
        align-items: center;
      }
      .form-item__icon {
        width: 30rpx;
        height: 32rpx;
        margin-right: 20rpx;
      }
      .form-item__content {
        color: rgba(43, 43, 43, .5);
      }
    }
  }
  .handle {
    padding: 0 32rpx;
    margin-top: 80rpx;
    padding-bottom: 40rpx;
  }
}
</style>
